@charset "utf-8";

/* -----------微信项目前端CSS框架-------------
* Created & Modified by WeUI
* Date modified 2016.02.23
* Copyright 2016
*
*/

/*  重定义器默认样式
	Name:			style-reset
	Example:
	Explain:		重定义浏览器默认样式
*/
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  line-height: 1.6;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* {
  margin: 0;
  padding: 0;
}
li {
    list-style: none;
}
a img {
  border: 0;
}
a {
  text-decoration: none;
}


/*  按钮组件
	Name:			  Button_style
	Example:    <input class="btn" type="button" />|<button class="btn"></button>|<a class="btn"></a>
              <a class="btn btn-primary|btn-info|btn-success|btn-warning|btn-dangerk" type="button">按钮<a>
	Explain:		btn-primary：主要||btn-info：信息|btn-success：成功|btn-warning：警告|btn-danger：危险
*/
.btn.btn-mini {
  line-height: 1.9;
  font-size: 14px;
  padding: 0 .75em;
  display: inline-block;
}
button.btn,
input.btn {
  width: 100%;
  border-width: 0;
  outline: 0;
  -webkit-appearance: none;
}
button.btn:focus,
input.btn:focus {
  outline: 0;
}
button.btn-inline,
input.btn-inline,
button.btn-mini,
input.btn-mini {
  width: auto;
}
/*gap between btn*/
.btn + .btn {
  margin-top: 15px;
}
.btn.btn-inline + .btn.btn-inline {
  margin-top: auto;
  margin-left: 15px;
}

/*按钮的在一行内，平均分布*/
.btn-area {
  margin: 1.17647059em 15px 0.3em;
}
.btn-area.btn-area-inline {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.btn-area.btn-area-inline .btn {
  margin-top: auto;
  margin-right: 15px;
  width: 100%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.btn-area.btn-area-inline .btn:last-child {
  margin-right: 0;
}
.btn {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
  line-height: 2.33333333;
  border-radius: 5px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
}
.btn:after {
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  box-sizing: border-box;
  border-radius: 10px;
}
.btn.btn-inline {
  display: inline-block;
}

/*btn block样式*/
.btn-default {
  background-color: #F7F7F7;
  color: #454545;
}
.btn-default:not(.btn-disabled):visited {
  color: #454545;
}
.btn-default:not(.btn-disabled):active {
  color: #A1A1A1;
  background-color: #DEDEDE;
}
.btn-primary {
  background-color: #0C61AD;
}
.btn-primary:not(.btn-disabled):visited {
  color: #FFFFFF;
}
.btn-primary:not(.btn-disabled):active {
  color: rgba(255, 255, 255, 0.4);
  background-color: #005BAC;
}
.btn-info {
  background-color: #6AA9DC;
}
.btn-info:not(.btn-disabled):visited {
  color: #FFFFFF;
}
.btn-info:not(.btn-disabled):active {
  color: rgba(255, 255, 255, 0.4);
  background-color: #6AA9DC;
}
.btn-success {
  background-color: #5CB85C;
}
.btn-success:not(.btn-disabled):visited {
  color: #FFFFFF;
}
.btn-success:not(.btn-disabled):active {
  color: rgba(255, 255, 255, 0.4);
  background-color: #5CB85C;
}
.btn-warning  {
  background-color: #F0AD4E;
}
.btn-warning:not(.btn-disabled):visited {
  color: #FFFFFF;
}
.btn-warning:not(.btn-disabled):active {
  color: rgba(255, 255, 255, 0.4);
  background-color: #F0AD4E;
}
.btn-danger {
  background-color: #EF4F4F;
}
.btn-danger:not(.btn-disabled):visited {
  color: #FFFFFF;
}
.btn-danger:not(.btn-disabled):active {
  color: rgba(255, 255, 255, 0.4);
  background-color: #C13E3E;
}
/*btn 禁用状态*/
.btn-disabled {
  color: rgba(255, 255, 255, 0.6);
}
.btn-disabled.btn-default {
  color: #C9C9C9;
}


/*btn btn-plain-#style 空心样式*/
.btn-plain-default {
  color: #5A5A5A;
  border: 1px solid #5A5A5A;
}
button.btn-plain-default,
input.btn-plain-default {
  border-width: 1px;
  background-color: transparent;
}
.btn-plain-default:after {
  border-width: 0;
}

.btn-plain-primary {
  color: #0C61AD;
  border: 1px solid #0C61AD;
}
button.btn-plain-primary,
input.btn-plain-primary {
  border-width: 1px;
  background-color: transparent;
}
.btn-plain-primary:active {
  border-color: #005BAC;
}
.btn-plain-primary:after {
  border-width: 0;
}

.btn-plain-info {
  color: #6AA9DC;
  border: 1px solid #6AA9DC;
}
button.btn-plain-info,
input.btn-plain-info {
  border-width: 1px;
  background-color: transparent;
}
.btn-plain-info:active {
  border-color: #6AA9DC;
}
.btn-plain-info:after {
  border-width: 0;
}

.btn-plain-success {
  color: #5CB85C;
  border: 1px solid #5CB85C;
}
button.btn-plain-success,
input.btn-plain-success {
  border-width: 1px;
  background-color: transparent;
}
.btn-plain-success:active {
  border-color: #5CB85C;
}
.btn-plain-success:after {
  border-width: 0;
}

.btn-plain-warning {
  color: #F0AD4E;
  border: 1px solid #F0AD4E;
}
button.btn-plain-warning,
input.btn-plain-warning {
  border-width: 1px;
  background-color: transparent;
}
.btn-plain-warning:active {
  border-color: #F0AD4E;
}
.btn-plain-warning:after {
  border-width: 0;
}

.btn-plain-danger {
  color: #EF4F4F;
  border: 1px solid #EF4F4F;
}
button.btn-plain-danger,
input.btn-plain-danger {
  border-width: 1px;
  background-color: transparent;
}
.btn-plain-danger:active {
  border-color: #EF4F4F;
}
.btn-plain-danger:after {
  border-width: 0;
}

/*  网格与布局
  Name:   网格与布局  
  Example:
  Explain:    
*/
.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

.row-wrap {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; 
}

.row-no-padding {
    padding: 0; 
}
.row-no-padding > .col {
    padding: 0; 
}



.col {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: block;
    width: 100%;
 }

 /*.row *:first-child {
   margin-left: 15px;
 }
 .row *:last-child {
   margin-right: 15px;
 }
*/
/*内部对齐方式*/
.row-top {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start;
  }

.row-bottom {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end;
  }

.row-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
  }

.row-stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    align-items: stretch;
  }

.row-baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    -moz-align-items: baseline;
    align-items: baseline;
  }

/* .col-* vertically aligns an individual .col */
.col-top {
    -webkit-align-self: flex-start;
    -moz-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start; }

.col-bottom {
    -webkit-align-self: flex-end;
    -moz-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end; }

.col-center {
    -webkit-align-self: center;
    -moz-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}
/*  Cell
	Name:			
	Example:
	Explain:		列
*/

/*cell行，相当于row*/
.cell { 
  position: relative;
  padding: 10px 15px;
  background-color: #FFFFFF;
  line-height: 1.41176471;
  font-size: 17px;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}
.cell:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}

.cell:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
/*列表上面有列表时，上边框不显示*/
.cell + .cell:before{
  display: none;
}

.cell-title {
  margin-top: .77em;
  margin-bottom: .3em;
  padding-left: 15px;
  padding-right: 15px;
  color: #888;
  font-size: 14px;
}
.cell-title + .cell {
  margin-top: 0;
}

.cell-hd{
  line-height: 0;/*s添加，出现line-height的继承 造成列居中对齐bug*/
  -webkit-align-self: center;
  -moz-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}
/*cell 边框处理*/
.cell.cell-border-none:before,
.cell.cell-border-none:after {
  display: none;
}
/*cell组*/
.cells {
  margin-top: 1.17647059em;
  background-color: #FFFFFF;
  line-height: 1.41176471;
  font-size: 17px;
  overflow: hidden;
  position: relative;
}

/*.cells-title {
  margin-top: .77em;
  margin-bottom: .3em;
  padding-left: 15px;
  padding-right: 15px;
  color: #888;
  font-size: 14px;
}
.cells-title + .cells {
  margin-top: 0;
}*/
.cell-title + .cells {
  margin-top: 0;
}
.cell-tips {
  margin-top: .3em;
  color: #888;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 14px;
}

.cell-ft {
  text-align: right;
  color: #888;
}
.cell-primary {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: block;
    width: 100%;
}

/*带跳转的*/
.cell-access.cell:not(.no-access) {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.cell-access.cell:not(.no-access):active {
  background-color: #ECECEC;
}
a.cell.cell-access {
  color: inherit;
}
.cell-access .cell-ft:after {
  content: " ";
  display: inline-block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #C8C8CD;
  border-style: solid;
  position: relative;
  top: -2px;
  top: -1px;
  margin-left: .3em;
}

/*radio列*/
.cell-radio {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.check {
  position: absolute;
  left: -9999em;
}
.cell-radio .cell-ft {
  padding-left: 0.35em;
}
.cell-radio:active {
  background-color: #ECECEC;
}
.cell-radio .check:checked + .icon-checked:before {
  display: block;
  content: '\EA08';
  color: #0C61AD;
  font-size: 16px;
}

/*chekbox*/
.cell-checkbox {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.cell-checkbox .cell-hd {
  padding-right: 0.35em;
}
.cell-checkbox:active {
  background-color: #ECECEC;
}
.cell-checkbox .icon-checked:before {
  content: '\EA01';
  color: #C9C9C9;
  font-size: 23px;
  display: block;
}
.cell-checkbox .check:checked + .icon-checked:before {
  content: '\EA06';
  color: #0C61AD;
}

/*开关switch*/
.cell-switch {
  padding-top: 6px;
  padding-bottom: 6px;
}
.switch {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  width: 52px;
  height: 32px;
  border: 1px solid #DFDFDF;
  outline: 0;
  border-radius: 16px;
  box-sizing: border-box;
  background: #DFDFDF;
}
.switch:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 30px;
  border-radius: 15px;
  background-color: #FDFDFD;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}
.switch:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}
.switch:checked {
  border-color: #0C61AD;
  background-color: #0C61AD;
}
.switch:checked:before {
  -webkit-transform: scale(0);
          transform: scale(0);
}
.switch:checked:after {
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
}

/*表单*/
.label {
  display: block;
  width: 3em;
}
.input {
  width: 100%;
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  background-color: transparent;
  font-size: inherit;
  color: inherit;
  height: 1.41176471em;
  line-height: 1.41176471;
}
.input::-webkit-outer-spin-button,
.input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.toptips {
  display: none;
  position: fixed;
  -webkit-transform: translateZ(0);
  width: 100%;
  top: 0;
  line-height: 2.3;
  font-size: 14px;
  text-align: center;
  color: #FFF;
  z-index: 2;
}
.toptips.warn {
  background-color: #E64340;
}
.cell-form.cell-warn {
  color: #E64340;
}
.cell-form.cell-warn .icon-warn {
  display: inline-block;
}
.cell-form .cell-hd {
  padding-right: .3em;
}
.cell-form .cell-ft {
  font-size: 0;
}
.cell-form .icon-warn {
  display: none;
}
.cell-form input,
.cell-form textarea,
.cell-form label[for] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*文本域*/
.textarea {
  display: block;
  border: 0;
  resize: none;
  width: 100%;
  color: inherit;
  font-size: 1em;
  line-height: inherit;
  outline: 0;
}
.textarea-counter {
  color: #B2B2B2;
  text-align: right;
}
.cell-warn .textarea-counter {
  color: #E64340;
}

/**/
.cell-select {
  padding: 0;
}
.cell-select .select {
  padding-right: 30px;
}
.cell-select .cell-bd:after {
  content: " ";
  display: inline-block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #C8C8CD;
  border-style: solid;
  position: relative;
  top: -2px;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
}
.select {
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  background-color: transparent;
  width: 100%;
  font-size: inherit;
  height: 44px;
  position: relative;
  z-index: 1;
  padding-left: 15px;
}
.select-before {
  padding-right: 15px;
}
.select-before .select {
  width: auto;
}
.select-before .cell-hd {
  position: relative;
}
.select-before .cell-hd:after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
}
.select-before .cell-hd:before {
  content: " ";
  display: inline-block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #C8C8CD;
  border-style: solid;
  position: relative;
  top: -2px;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
}
.select-before .cell-bd {
  padding-left: 15px;
}
.select-before .cell-bd:after {
  display: none;
}
.select-after {
  padding-left: 15px;
}
.vcode {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.vcode .cell-ft img {
  margin-left: 5px;
  height: 44px;
  vertical-align: middle;
}


/*图片上传*/
.uploader-hd {
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
}
.uploader-hd .cell-ft {
  font-size: 1em;
}
.uploader-bd {
  margin-bottom: -4px;
  margin-right: -9px;
  overflow: hidden;
}
.uploader-files {
  list-style: none;
}
.uploader-file {
  float: left;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 79px;
  height: 79px;
  background: no-repeat center center;
  background-size: cover;
}
.uploader-status {
  position: relative;
}
.uploader-status:before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.uploader-status .uploader-status-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #FFFFFF;
}
.uploader-status .icon-warn {
  display: block;
}
.uploader-input-wrp {
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 77px;
  height: 77px;
  border: 1px solid #D9D9D9;
}
.uploader-input-wrp:before,
.uploader-input-wrp:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #D9D9D9;
}
.uploader-input-wrp:before {
  width: 2px;
  height: 39.5px;
}
.uploader-input-wrp:after {
  width: 39.5px;
  height: 2px;
}
.uploader-input-wrp:active {
  border-color: #999999;
}
.uploader-input-wrp:active:before,
.uploader-input-wrp:active:after {
  background-color: #999999;
}
.uploader-input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*  Msg
  Name:  msg   
  Example:
  Explain:  Msg 可以作为一个页面布局的案例
*/

.msg {
  padding-top: 36px;
  text-align: center;
}
.msg .icon-area {
  margin-bottom: 30px;
}
.msg .text-area {
  margin-bottom: 25px;
  padding: 0 20px;
}
.msg .msg-title {
  margin-bottom: 5px;
  font-weight: 400;
  font-size: 20px;
}
.msg .msg-desc {
  font-size: 14px;
  color: #888;
}
.msg .opr-area {
  margin-bottom: 25px;
}
.msg .extra-area {
  margin-bottom: 15px;
  font-size: 14px;
  color: #888;
}
.msg .extra-area a {
  color: #61749B;
}
@media screen and (min-height: 438px) {
  .extra-area {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
}

/*  Article
  Name:  article   
  Example:
  Explain:  文章
*/
.article {
  padding: 20px 15px;
  font-size: 15px;
}
.article section {
  margin-bottom: 1.5em;
}
.article h1 {
  font-size: 17px;
  font-weight: 400;
  margin-bottom: .75em;
}
.article h2 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: .3em;
}
.article h3 {
  font-weight: 400;
  font-size: 15px;
}
.progress {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.progress-bar {
  background-color: #EBEBEB;
  height: 3px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.progress-inner-bar {
  width: 0;
  height: 100%;
  background-color: #09BB07;
}
.progress-opr {
  display: block;
  margin-left: 15px;
  font-size: 0;
}

/*  Grid
  Name:  Grid  
  Example:
  Explain:  网格 首页样式 建议删除
*/
.grids {
  position: relative;
  overflow: hidden;
}
.grids:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.grids:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  border-left: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
}
.grid {
  position: relative;
  float: left;
  padding: 20px 10px;
  width: 33.33333333%;
  box-sizing: border-box;
}
.grid:before {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
  right: -1px;
}
.grid:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.grid:active {
  background-color: #E4E4E4;
}
.grid-icon {
  width: 28px;
  height: 28px;
  margin: 0 auto;
}
.grid-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.grid-icon + .grid-label {
  margin-top: 5px;
}
.grid-label {
  display: block;
  text-align: center;
  color: #000;
  font-size: 14px;
}

/*  Dialog
  Name:     
  Example:
  Explain:    对话框 成功提示｜加载提示
*/
.dialog {
  position: fixed;
  z-index: 101;
  width: 85%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #FAFAFC;
  text-align: center;
  border-radius: 3px;
}
.dialog-confirm .dialog .dialog-hd {
  padding: 1.2em 20px .5em;
}
.dialog-confirm .dialog .dialog-bd {
  text-align: left;
}
.dialog-hd {
  padding: 1.2em 0 .5em;
}
.dialog-title {
  font-weight: 400;
  font-size: 17px;
}
.dialog-bd {
  padding: 0 20px;
  font-size: 15px;
  color: #888;
}
.dialog-ft {
  position: relative;
  line-height: 42px;
  margin-top: 20px;
  font-size: 17px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.dialog-ft a {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: #3CC51F;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.dialog-ft a:active {
  background-color: #EEEEEE;
}
.dialog-ft:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid #D5D5D6;
  color: #D5D5D6;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.dialog-confirm .dialog-ft a {
  position: relative;
}
.dialog-confirm .dialog-ft a:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  border-left: 1px solid #D5D5D6;
  color: #D5D5D6;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
}
.dialog-confirm .dialog-ft a:first-child:after {
  display: none;
}
.btn-dialog.default {
  color: #353535;
}
.btn-dialog.primary {
  color: #0BB20C;
}
@media screen and (min-width: 1024px) {
  .dialog {
    width: 35%;
  }
}

/*  Toast
  Name:     
  Example:
  Explain:    toast
*/
.toast {
  position: fixed;
  z-index: 3000;
  width: 7.6em;
  min-height: 7.6em;
  top: 180px;
  left: 50%;
  margin-left: -3.8em;
  background: rgba(40, 40, 40, 0.75);
  text-align: center;
  border-radius: 5px;
  color: #FFFFFF;
}
.icon-toast {
  margin: 22px 0 0;
  display: block;
}
.icon-toast:before {
  content: '\EA08';
  color: #FFFFFF;
  font-size: 55px;
}
.toast-content {
  margin: 0 0 15px;
}
.loading-toast .toast-content {
  margin-top: 64%;
  font-size: 14px;
}
.loading {
  position: absolute;
  width: 0px;
  z-index: 2000000000;
  left: 50%;
  top: 38%;
}
.loading-leaf {
  position: absolute;
  top: -1px;
  opacity: 0.25;
}
.loading-leaf:before {
  content: " ";
  position: absolute;
  width: 8.14px;
  height: 3.08px;
  background: #d1d1d5;
  box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
  border-radius: 1px;
  -webkit-transform-origin: left 50% 0px;
          transform-origin: left 50% 0px;
}
.loading-leaf-0 {
  -webkit-animation: opacity-60-25-0-12 1.25s linear infinite;
          animation: opacity-60-25-0-12 1.25s linear infinite;
}
.loading-leaf-0:before {
  -webkit-transform: rotate(0deg) translate(7.92px, 0px);
          transform: rotate(0deg) translate(7.92px, 0px);
}
.loading-leaf-1 {
  -webkit-animation: opacity-60-25-1-12 1.25s linear infinite;
          animation: opacity-60-25-1-12 1.25s linear infinite;
}
.loading-leaf-1:before {
  -webkit-transform: rotate(30deg) translate(7.92px, 0px);
          transform: rotate(30deg) translate(7.92px, 0px);
}
.loading-leaf-2 {
  -webkit-animation: opacity-60-25-2-12 1.25s linear infinite;
          animation: opacity-60-25-2-12 1.25s linear infinite;
}
.loading-leaf-2:before {
  -webkit-transform: rotate(60deg) translate(7.92px, 0px);
          transform: rotate(60deg) translate(7.92px, 0px);
}
.loading-leaf-3 {
  -webkit-animation: opacity-60-25-3-12 1.25s linear infinite;
          animation: opacity-60-25-3-12 1.25s linear infinite;
}
.loading-leaf-3:before {
  -webkit-transform: rotate(90deg) translate(7.92px, 0px);
          transform: rotate(90deg) translate(7.92px, 0px);
}
.loading-leaf-4 {
  -webkit-animation: opacity-60-25-4-12 1.25s linear infinite;
          animation: opacity-60-25-4-12 1.25s linear infinite;
}
.loading-leaf-4:before {
  -webkit-transform: rotate(120deg) translate(7.92px, 0px);
          transform: rotate(120deg) translate(7.92px, 0px);
}
.loading-leaf-5 {
  -webkit-animation: opacity-60-25-5-12 1.25s linear infinite;
          animation: opacity-60-25-5-12 1.25s linear infinite;
}
.loading-leaf-5:before {
  -webkit-transform: rotate(150deg) translate(7.92px, 0px);
          transform: rotate(150deg) translate(7.92px, 0px);
}
.loading-leaf-6 {
  -webkit-animation: opacity-60-25-6-12 1.25s linear infinite;
          animation: opacity-60-25-6-12 1.25s linear infinite;
}
.loading-leaf-6:before {
  -webkit-transform: rotate(180deg) translate(7.92px, 0px);
          transform: rotate(180deg) translate(7.92px, 0px);
}
.loading-leaf-7 {
  -webkit-animation: opacity-60-25-7-12 1.25s linear infinite;
          animation: opacity-60-25-7-12 1.25s linear infinite;
}
.loading-leaf-7:before {
  -webkit-transform: rotate(210deg) translate(7.92px, 0px);
          transform: rotate(210deg) translate(7.92px, 0px);
}
.loading-leaf-8 {
  -webkit-animation: opacity-60-25-8-12 1.25s linear infinite;
          animation: opacity-60-25-8-12 1.25s linear infinite;
}
.loading-leaf-8:before {
  -webkit-transform: rotate(240deg) translate(7.92px, 0px);
          transform: rotate(240deg) translate(7.92px, 0px);
}
.loading-leaf-9 {
  -webkit-animation: opacity-60-25-9-12 1.25s linear infinite;
          animation: opacity-60-25-9-12 1.25s linear infinite;
}
.loading-leaf-9:before {
  -webkit-transform: rotate(270deg) translate(7.92px, 0px);
          transform: rotate(270deg) translate(7.92px, 0px);
}
.loading-leaf-10 {
  -webkit-animation: opacity-60-25-10-12 1.25s linear infinite;
          animation: opacity-60-25-10-12 1.25s linear infinite;
}
.loading-leaf-10:before {
  -webkit-transform: rotate(300deg) translate(7.92px, 0px);
          transform: rotate(300deg) translate(7.92px, 0px);
}
.loading-leaf-11 {
  -webkit-animation: opacity-60-25-11-12 1.25s linear infinite;
          animation: opacity-60-25-11-12 1.25s linear infinite;
}
.loading-leaf-11:before {
  -webkit-transform: rotate(330deg) translate(7.92px, 0px);
          transform: rotate(330deg) translate(7.92px, 0px);
}
@-webkit-keyframes opacity-60-25-0-12 {
  0% {
    opacity: 0.25;
  }
  0.01% {
    opacity: 0.25;
  }
  0.02% {
    opacity: 1;
  }
  60.01% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-1-12 {
  0% {
    opacity: 0.25;
  }
  8.34333% {
    opacity: 0.25;
  }
  8.35333% {
    opacity: 1;
  }
  68.3433% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-2-12 {
  0% {
    opacity: 0.25;
  }
  16.6767% {
    opacity: 0.25;
  }
  16.6867% {
    opacity: 1;
  }
  76.6767% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-3-12 {
  0% {
    opacity: 0.25;
  }
  25.01% {
    opacity: 0.25;
  }
  25.02% {
    opacity: 1;
  }
  85.01% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-4-12 {
  0% {
    opacity: 0.25;
  }
  33.3433% {
    opacity: 0.25;
  }
  33.3533% {
    opacity: 1;
  }
  93.3433% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-5-12 {
  0% {
    opacity: 0.270958333333333;
  }
  41.6767% {
    opacity: 0.25;
  }
  41.6867% {
    opacity: 1;
  }
  1.67667% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.270958333333333;
  }
}
@-webkit-keyframes opacity-60-25-6-12 {
  0% {
    opacity: 0.375125;
  }
  50.01% {
    opacity: 0.25;
  }
  50.02% {
    opacity: 1;
  }
  10.01% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.375125;
  }
}
@-webkit-keyframes opacity-60-25-7-12 {
  0% {
    opacity: 0.479291666666667;
  }
  58.3433% {
    opacity: 0.25;
  }
  58.3533% {
    opacity: 1;
  }
  18.3433% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.479291666666667;
  }
}
@-webkit-keyframes opacity-60-25-8-12 {
  0% {
    opacity: 0.583458333333333;
  }
  66.6767% {
    opacity: 0.25;
  }
  66.6867% {
    opacity: 1;
  }
  26.6767% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.583458333333333;
  }
}
@-webkit-keyframes opacity-60-25-9-12 {
  0% {
    opacity: 0.687625;
  }
  75.01% {
    opacity: 0.25;
  }
  75.02% {
    opacity: 1;
  }
  35.01% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.687625;
  }
}
@-webkit-keyframes opacity-60-25-10-12 {
  0% {
    opacity: 0.791791666666667;
  }
  83.3433% {
    opacity: 0.25;
  }
  83.3533% {
    opacity: 1;
  }
  43.3433% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.791791666666667;
  }
}
@-webkit-keyframes opacity-60-25-11-12 {
  0% {
    opacity: 0.895958333333333;
  }
  91.6767% {
    opacity: 0.25;
  }
  91.6867% {
    opacity: 1;
  }
  51.6767% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.895958333333333;
  }
}
.mask {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.mask-transparent {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.mask-transition {
  display: none;
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  -webkit-transition: background .3s;
  transition: background .3s;
}


/*  Actionsheet
  Name:  actionsheet  
  Example:
  Explain:  actionsheet
*/
.fade-toggle {
  background: rgba(0, 0, 0, 0.6);
}
.actionsheet {
  position: fixed;
  left: 0;
  bottom: 0;
  -webkit-transform: translate(0, 100%);
          transform: translate(0, 100%);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 101;
  width: 100%;
  background-color: #EFEFF4;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}
.actionsheet-menu {
  background-color: #FFFFFF;
}
.actionsheet-action {
  margin-top: 6px;
  background-color: #FFFFFF;
}
.actionsheet-cell {
  position: relative;
  padding: 10px 0;
  text-align: center;
  font-size: 18px;
}
.actionsheet-cell:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.actionsheet-cell:active {
  background-color: #ECECEC;
}
.actionsheet-cell:first-child:before {
  display: none;
}
.actionsheet-toggle {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        